<template>
    <div class="item" @click="listHandler(index, item.id)" :class="[item.id == active ? 'active' : '']"
        v-for="(item, index) in list" :key="index" :title="item">
        <div class="num">{{ index + 1 }}</div>
        <div class="info">
            <p class="title">{{ item.title }}</p>
            <div class="info-details">
                <div class="video"><span class="iconfont icon-shipin"></span>{{ item.ques_type }}</div>
                <div class="time"><span class="iconfont icon-shijian"></span>{{ item.score }}分</div>
            </div>
        </div>
    </div>
</template>

<script setup>

import { ref, onMounted } from 'vue';
import api from "../../api"
import md5 from "js-md5"

const list = ref([]);
const active = ref(0)
const type = ref(3)
const page = ref(1)
const emit = defineEmits(["onIDEvent"])
const props = defineProps({
    id: {
        type: Number,
        default: 0
    },
    courseID: {
        type: [Number, String],
        defualt: 0
    }
})

onMounted(() =>{
    active.value = props.courseID
})

onMounted(() => {
    api.getVideoList({
        id: props.id,
        type: type.value,
        page: page.value,
        verify: md5(props.id.toString() + page.value.toString() + type.value.toString())
    }).then(res => {
        if (res.data.code === 200) {
            list.value = res.data.data
        }
    })
})


const listHandler = (index, id) => {
    active.value = id
    emit("onIDEvent", id, true)
}

</script>

<style scoped>
.item {
    margin: 15px;
    padding: 15px;
    background: #F6F7F8;
    overflow: hidden;
    clear: both;
    color: #333333;
}

.title {
    font-size: 18px;
    padding-bottom: 0;
}

.item .num {
    float: left;
    width: 5%;
    font-size: 16px;
}

.item .info {
    width: 92%;
    float: right;
    font-size: 16px;
}

.info-details {
    overflow: hidden;
    clear: both;
    margin-top: 10px;
}

.info-details div {
    float: left;
    font-size: 13px;
}

.info-details div span {
    font-size: 13px;
    margin-right: 3px;
}

.info-details .time {
    margin-left: 20px;
}

.active {
    border: 1px solid #594094;
    border-radius: 5px;
    color: #594094;
}
</style>